<template>
  <div>
    <!--    工具页面-->
    <AppTools v-bind:type_info="'添加'" v-bind:multipleSelection="multipleSelection" @listData='listData' />
    <AppTools ref="tools_box" v-bind:type_info="'编辑'" v-bind:edit_form="info" @listData='listData' />
    <!--    展示页面-->
    <el-table size='mini' :data="server_list" tooltip-effect="dark" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" :label="$t('应用名称')" width="200">
        <template slot-scope="scope">
          <tooltip :html="scope.row.name" :content="scope.row.name" class="wid190" :refName="scope.row.name">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="app_type" :label="$t('应用类型')" width="120" :formatter="app_type">
      </el-table-column>
      <el-table-column prop="proto_l2" :label="$t('IP类型')" width="80" :formatter="proto_l2_type">
      </el-table-column>
      <el-table-column prop="proto_l3" :label="$t('协议类型')" width="100" :formatter="proto_l3_type">
      </el-table-column>
      <el-table-column prop="src_port" :label="$t('源端口号')">
      </el-table-column>
      <el-table-column prop="dst_port" :label="$t('目的端口号')">
      </el-table-column>
      <el-table-column prop="feature_offset" :label="$t('特征偏移量')">
      </el-table-column>
      <el-table-column prop="feature" :label="$t('数据特征')">
        <template slot-scope="scope">
          <tooltip :html="scope.row.feature" :content="scope.row.feature" class="wid190" :refName="scope.row.feature">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ref" :label="$t('引用计数')">
        <template slot-scope="scope">
          <tooltip :html="scope.row.ref" :content="scope.row.ref" class="wid190" :refName="scope.row.ref">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="sys" fixed="right" :label="$t('操作')">
        <template slot-scope="scope">
          <el-button v-if="scope.row.sys === 0" type="success" plain size="mini" :class="'edit' + scope.$index" @click="get_info(scope.row)">
            {{$t('编辑')}}
          </el-button>
          <span v-if="scope.row.sys === 1">{{$t('系统默认')}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import AppTools from './AppTools'
import { getAppArray, getAppInfo } from '@/api/list/app'
export default {
  name: 'AppDiy',
  components: {
    AppTools
  },
  data () {
    return {
      server_list: [],
      info: {},
      editVisible: false,
      multipleSelection: []
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    listData () {
      getAppArray().then(response => {
        this.server_list = response.info
      })
    },
    change (data) {
      this.editVisible = data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handel_array (row) {
      let test = ''
      row.member.forEach((item, index, array) => {
        if (index === row.member.length - 1) {
          test += item
        } else {
          test += item + ','
        }
      })
      return test
    },
    app_type (row) {
      switch (row.app_type) {
        case 'white':
          return this.$t('白名单')
        case 'black':
          return this.$t('黑名单')
        case 'any':
          return this.$t('任意')
        default:
          return this.$t('其他')
      }
    },
    proto_l2_type (row) {
      switch (row.proto_l2) {
        case 'ipv4':
          return 'IPV4'
        case 'ipv6':
          return 'IPV6'
        case 'any':
          return this.$t('任意')
        default:
          return this.$t('其他')
      }
    },
    proto_l3_type (row) {
      switch (row.proto_l3) {
        case 'tcp':
          return 'TCP'
        case 'udp':
          return 'UDP'
        case 'any':
          return this.$t('任意')
        default:
          return this.$t('其他')
      }
    },
    get_info (row) {
      let formData = {}
      formData.name = row.name
      getAppInfo(formData).then(response => {
        this.info = response.info[0]
        this.$refs.tools_box.edit_info()
      })
    }
  }
}
</script>

<style scoped>
</style>
